El cuerpo de mi HTML:
<body> <script async src="changeParContent.js"></script> <script> \\some irrelevant inline code that takes a long time to run </script> <p id='par1'>Initial text</p> </body>Y aquí está changeParContent.js:
document.getElementById('par1').innerHTML = "The content was changed!"Esperaba que Javascript fallara, ya que uso el atributo asíncrono. Significa que el script se descargará y ejecutará mientras se analiza el HTML. Ahora, dado que intencionalmente disminuí la velocidad del análisis de HTML, esperaba que el javascript se ejecutara antes de que se definiera el párrafo "p1".
Pensé que hice lo único que se supone que no debes hacer: definir los elementos DOM que se usan en el script asíncrono debajo del script.
Pero de alguna manera funciona y el párrafo cambia. ¿Cómo puede ser?
Los scripts asíncronos realmente no se ejecutan de manera predecible, y se debe principalmente a la implementación del navegador. Por ejemplo, debería encontrar los siguientes trabajos en Chrome:
<body> <script async src="./changeParContent.js"></script> <script> function sleepFor(sleepDuration){ var now = new Date().getTime(); while(new Date().getTime() < now + sleepDuration){ /* Do nothing */ } } sleepFor(5000); </script> <p id='par1'>Initial text</p> </body>Sin embargo, en Firefox se lanza el siguiente error:
Uncaught TypeError: document.getElementById(...) is null Parece que en ambos navegadores, la secuencia de script en línea lenta bloquea la ejecución de la secuencia de comandos async y la carga del resto del DOM. Luego, después de que se ejecuta este script lento, el script async se ejecuta en paralelo con el resto de la carga del DOM. En mis experimentos, parece que en Chrome la carrera la gana el DOM, lo que no provoca errores ya que el elemento se carga en el momento en que se ejecuta el script async . Sin embargo, en mi prueba de Firefox, la carrera la gana el script async que arroja un error.
Creo que la lección aquí es confiar en las mejores prácticas, incluso si parece que no hay problemas con su código.